<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" th:href="@{/resources/imgs/icon.svg}"/>
    <meta name="description" content="Java websocket middleware service">
    <meta name="author" content="xchb">
    <script th:src="@{/resources/js/jquery.js}"></script>
    <script th:src="@{/resources/js/bootstrap.min.js}"></script>
    <link th:href="@{/resources/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/resources/css/main.css}" rel="stylesheet">
    <title>服务信息</title>

    <style>
        .redColor {
            background-color: red;
            cursor: pointer;
        }

        .greenColor {
            background-color: greenyellow;
            cursor: pointer;
        }

        td {
            cursor: pointer;
        }
    </style>

</head>
<body>


<div class="wrapper-page" style="margin-top: 3%;text-align: center;">

    <h3>
		<span>
			服务总数量 <span
                th:class="'label label-default '+${datas.serverCount>0?'greenColor':'redColor'}"
                th:text="${datas.serverCount}"></span>
		</span>
    </h3><br/><br/>
    <div style="width: 90%;display: inline-block;">
        <table class="table table-striped table-hover">
            <thead>
            <tr class="danger">
                <td>
                    序号
                </td>
                <td class="active">
                    协议
                </td>
                <td>
                    节点ip
                </td>
                <td>
                    连接数量
                </td>
            </tr>
            </thead>
            <tbody>
            <tr th:if="${datas.items==null || datas.items.size()<1}">
                <td colspan="9" style="color: red;">
                    暂无任何服务
                </td>
            </tr>
            <tr th:if="${datas.items!=null || datas.items.size()>0}" th:each="item,state:${datas.items}">
                <td th:text="${state.index+1}"></td>
                <td th:text="${item.protocol}"></td>
                <td th:text="${item.netAddress}"></td>
                <td th:text="${item.connectorCount}"></td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

</body>

<script>


</script>
</html>